<template>
  <div class="select-tenant">
    <p-radio-group
      v-model="tenantId"
    >
      <p-radio
        v-for="item in tenantList"
        :key="item.tenantId"
        :value="item.tenantId"
        :disabled="userInfo.tenantId === item.tenantId"
      >
        {{ item.tenantName }}({{ item.tenantId }})
      </p-radio>
    </p-radio-group>

    <p-button
      block
      type="primary"
      size="large"
      :loading="loading"
      :disabled="disabled"
      @click="submit"
    >
      进入
    </p-button>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { switchTenant } from '@/api/login'
  import { timeFix, isDev } from '@/utils'

  export default {
    name: 'SelectTenant',
    props: {
      isLogin: {
        type: Boolean,
        default: false
      },
      loginData: {
        type: Object,
        default: () => {}
      }
    },
    data () {
      return {
        tenantId: undefined,
        loading: false,
        disabled: false
      }
    },
    computed: {
      ...mapState({
        tenantList: state => state.user.tenantList,
        userInfo: state => state.user.userInfo
      })
    },
    watch: {
      tenantId (val) {
        // 选择的租户和当前租户一致时，禁用 按钮
        this.disabled = val === this.userInfo.tenantId
      }
    },
    created () {
      if (this.isLogin) {
        // 登录时 默认选中第一个
        this.tenantId = this.tenantList[0].tenantId
      } else {
        // 切换租户时 默认选中当前租户
        this.tenantId = this.userInfo.tenantId
        this.disabled = true
      }
    },
    methods: {
      submit () {
        if (this.isLogin) {
          this.login()
        } else {
          this.switchTenant()
        }
      },

      login () {
        this.loading = true

        const params = {
          tenantId: this.tenantId,
          ...this.loginData
        }

        this.$store.dispatch('login', params)
          .then(res => {
            if (res.code === 0) {
              this.$notification.success({
                message: '欢迎',
                description: `${timeFix()}，欢迎回来`
              })
            } else {
              throw new Error(res.msg)
            }
          })
          .catch(err => {
            this.$message.error(err.message)
          })
          .finally(() => {
            this.loading = false
          })
      },

      switchTenant () {
        this.loading = true

        switchTenant(this.tenantId)
          .then(res => {
            if (res.code === 0) {
              this.switchSuccessHandle()
            } else {
              throw new Error(res.msg)
            }
          })
          .catch(err => {
            this.$message.error(err.message)
          })
          .finally(() => {
            this.loading = false
          })
      },
      switchSuccessHandle () {
        // 自动跳转
        const timer = setTimeout(this.switchSuccessJump, 2000)

        // 按钮禁用
        this.disabled = true

        // 消息提示
        this.$success({
          title: '切换租户成功',
          content: '页面即将跳转',
          okText: '立即跳转',
          onOk: () => {
            clearTimeout(timer)
            this.switchSuccessJump()
          }
        })

        // 清空 tab 缓存，避免部分菜单无权限
        // router-tabs 组件 会在 beforeunload 时 写入缓存
        // 因此此处需要在 beforeunload 中 清除缓存
        window.addEventListener('beforeunload', () => {
          this.$ls.remove('routerTabs')
        })
      },
      switchSuccessJump () {
        // 租户切换成功后
        // 1. 直接刷新页面，可能切换后的租户 无该页面权限
        // 2. 跳转到当前系统首页，可能切换后的租户 无该系统权限
        // 开发环境 直接 刷新页面
        // 生产环境 直接 跳转到 poros-igeek
        if (isDev) {
          // 开发环境 直接刷新页面
          location.reload()
        } else {
          // 跳转到 统一认证中心
          location.href = '/poros-igeek'
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .select-tenant {
    /deep/ .poros-radio-group {
      display: block;
      margin-bottom: 24px;
      padding-left: 5px;
      max-height: 150px;
      overflow-y: auto;

      .poros-radio-wrapper {
        display: block;
        line-height: 30px;
      }
    }
  }
</style>